<template>
  <div class="box">
    <h2>son2 子组件</h2>
    从vuex中获取到的值 <label>{{count}}</label>
    <h3>{{title}}</h3>
    <br>
    <button @click="reduceCount(1)">值 -1</button>
    <button @click="reduceCount(5)">值 -5</button>
    <button @click="reduceCount(10)">值 -10</button>
    <button @click="changeCountAsync(888)">一秒后更改为 888</button>
    <hr>
    这是原数组： {{list}}
    <hr>
    这是比5大的元素： {{filterList}}
    <hr>
    modules数据访问<label>{{ userInfo }}</label>
    <hr>
    modules访问getters:<label>{{ getUpperName }}</label>
    <hr>
    modules访问mutations:<button @click="changeUser({name: '碍事梨2',age: 23})">更改用户为碍事梨2</button>
    <hr>
    modules访问actions:<button @click="changeUserAsync({
        name: '座山雕',
        age: 100
      })">一秒后用户为座山雕</button>
    <br>
    <button @click="getUser">点击获取后台数据</button>
    <span>{{other}}{{isJisr}}</span>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: 'Son2',
  data () {
    return {
    }
  },
  computed: {
    ...mapState(['count', 'title', 'list']),
    ...mapState('user', ['userInfo', 'other']),
    ...mapGetters(['filterList']),
    ...mapGetters('user', ['getUpperName']),
    isJisr () {
      console.log('是否每次都计算', this.count)
    }
  },
  created () {
  },
  methods: {
    ...mapMutations(['reduceCount']),
    ...mapActions(['changeCountAsync']),
    ...mapActions('user', ['changeUserAsync', 'getUser']),
    ...mapMutations('user', ['changeUser'])
  }
}
</script>

<style lang="less">
.box {
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2{
  margin-top: 10px;
}
</style>
